<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="container">
				<h3 class="text-center">Vuex购物车demo</h3>
				<h4 class="text-center">商品信息</h4>
				<table class="table table-striped table-bordered text-center">
					<tr>
						<th>id</th>
						<th>名称</th>
						<th>价格</th>
						<th>数量</th>
						<th>Actions</th>
					</tr>
					<tr v-for="item in shop_list">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>{{item.num}}</td>
						<td>
							<button class="btn btn-info" @click="add(item)">{{item.num?'+':'加入购物车'}}</button>
							<button class="btn btn-warning" @click="reduce(item)" v-if="item.num">-</button>
						</td>
					</tr>
				</table>
				<h4 class="text-center">购物车信息</h4>
				<table class="table table-striped table-bordered text-center">
					<tr>
						<th>id</th>
						<th>名称</th>
						<th>价格</th>
						<th>数量</th>
						<th>总价</th>
						<th>Actions</th>
					</tr>
					<tr v-for="list in total_list">
						<td>{{list.id}}</td>
						<td>{{list.name}}</td>
						<td>{{list.price}}</td>
						<td>{{list.num}}</td>
						<td>{{list.price*list.num}}</td>
						<td>
							<button class="btn btn-info" @click="add(list)">+</button>
							<button class="btn btn-warning"  @click="reduce(list)">-</button>
							<button class="btn btn-danger" @click="delete_item(list)">X</button>
						</td>
					</tr> 
				</table>
				<div>
					<div>
						<div class="" style="display: inline-block;font-size: 24px; margin-right: 15px;">总计：{{aggregate}}</div>
						<div class="" style="display: inline-block;font-size: 24px;">总价:{{totals}}</div>
						<div class="pull-right btn btn-danger" style="display: inline-block;" @click="clearCart()">清空购物车</div>
						
					</div>
				</div>
			</div>
		</div>
		
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				shop_list: 	[],
		        
		        total_list: localStorage.getItem('cartItem')?JSON.parse(localStorage.getItem('cartItem')):[],
		        
		    },
		    mounted:function() {
		    	/*var _that = this
		    	axios.get('js/data.json').then(function(response){
		    		if(response.status == 200){
		    			_that.shop_list = response.data.items;
		    		}
		    		
		    	}).catch(function(error){
		    		console.log(error)
		    	})*/
		    	
		    	axios.get('js/data.json').then((response)=>{
		    		if(response.status == 200){
		    			this.shop_list = response.data.items;
		    		}
		    	}).catch(function(error){
		    		console.log(error)
		    	})
		    			    	
		    	for(var i=0;i<this.shop_list.length;i++){
		    		for(var j in this.total_list){
		    			if(this.shop_list[i].id == this.total_list[j].id){
		    				this.$set(this.shop_list, i, this.total_list[j]);
		    			}
		    		}
		    	};
		    	
		    },
		    computed:{
		    	//总计
		    	aggregate: function(){
		    		var aggregate = 0;
		    		for(var i in this.total_list){
		    			aggregate += this.total_list[i].num;
		    		}
		    		return aggregate;
		    	},
		    	//总价
		    	totals: function(){
		    		var totals = 0;
		    		for(var i in this.total_list){
		    			totals += this.total_list[i].price*this.total_list[i].num;
		    		}
		    		return totals;
		    	}
		    },
		    methods:{
		    	setLocalStorage: function(data){
		    		localStorage.setItem('cartItem',JSON.stringify(data))
		    	},
		    	
		    	
		    	//增加
		    	add: function(item){
		    		for(var i=0;i<this.shop_list.length;i++){
		    			if(item.id == this.shop_list[i].id){
		    			//	
	    					this.shop_list[i].num ++;
		    				break
		    			}
		    		}
		    		
		    		if(this.total_list.indexOf(item) > -1){
		    			
		    		}else{
		    			this.total_list.push(item)
		    		}
		    		this.setLocalStorage(this.total_list);
		    	},
		    	//减少
		    	reduce:function(item){
		    		for(var i in this.shop_list){
		    			if(item.id == this.shop_list[i].id){
		    				this.shop_list[i].num -=1 ;
		    				if(this.shop_list[i].num == 0){
		    					var index = this.total_list.indexOf(item)
//		    					console.log(index);
//		    					this.total_list.splice(index,1);
		    					this.$delete(this.total_list,index);
		    				}
		    				break
		    			}
		    		}
		    		this.setLocalStorage(this.total_list);
		    	},
		    	//删除
		    	delete_item:function(item){
		    		for(var i in this.shop_list){
		    			if(item.id == this.shop_list[i].id){
		    				this.shop_list[i].num = 0
	    					var index = this.total_list.indexOf(item)
//	    					console.log(index);
	    					//this.total_list.splice(index,1);
	    					this.$delete(this.total_list,index)
	    					this.setLocalStorage(this.total_list);
		    				break
		    			}
		    		}
		    	},
		    	//清空购物车
		    	clearCart: function(){
		    		this.total_list = [];
		    		this.setLocalStorage(this.total_list);
		    		for(var i in this.shop_list){
		    			this.shop_list[i].num = 0
		    		}
		    	}
		    	
		    }
		    
		    
		})
	</script>
</html>
